<template>
  <view class="page">
    <!-- 背景 -->
    <view class="mybg">
      <image class="myimg" :src="setCdn('/myimgs/index/bg.png')" mode="scaleToFill"></image>
    </view>
    <scroll-view class="home" scroll-y="true">
      <!-- title -->
      <view class="title">
        <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/title.png')" mode="widthFix"></image>
      </view>
      <!-- 转盘图片 -->
      <view class="box">
        <view class="plant">
          <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/plant.png')" mode="widthFix"></image>
        </view>
        <view class="bottleBox"  :animation="animationData" @touchstart="goStart" @touchmove='touchmoveBottle'
              @touchend="touchend">
          <!-- 手机号 -->
          <button class="btn phone" open-type="getPhoneNumber" @getphonenumber="getphonenumber"
                  v-if="havePhone==0"></button>
          <!-- 蓄力动效  -->
          <view class="bottle">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-all.png')" mode="widthFix"></image>
          </view>
          <view class="top" :animation="animationDataTop">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/b-top.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 可以参与活动 -->
      <view class="buttons" v-if="isDuring">
        <!-- 次数 -->
        <view class="num">
          抽奖次数：{{totalLotteryCount-lotteryCount}}/{{totalLotteryCount}}
        </view>
        <!-- 按钮 -->
        <view class="btns">
          <button class="btn share" @click="myShare" open-type="share">
            <image class="myimg" :src="setCdn('/myimgs/prize/share.png')" mode="widthFix"></image>
          </button>
        </view>
        <!-- 规则按钮 -->
        <view class="ruleBtn" @click="openRule">
          <image class="myimg" :src="setCdn('/myimgs/prize/goRule.png')" mode="widthFix"></image>
        </view>
      </view>
      <!-- 活动结束 -->
      <view class="over" v-else>
        <image class="myimg" :src="setCdn('/myimgs/prize/over.png')" mode="widthFix"></image>
      </view>
      <!--                                            弹窗                                                                -->
      <!-- 抽奖规则 -->
      <view class="mask rule" v-if="popType=='isRule'" @click="popType=''" @touchmove.stop.prevent="moveHandle">
        <view class="pop animate__fadeInUp" @click.stop="inputt">
          <view class="popbg">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/rule.png')" mode="widthFix"></image>
          </view>
          <view class="tips" v-if="isStart">
            <view class="icon" @click.stop="changeAgree">
              <image class="myimg choosed" :src="setCdn('/myimgs/rule/choosed.png')" mode="widthFix"
                     v-if="isAgree==1"></image>
              <image class="myimg notchoose" :src="setCdn('/myimgs/rule/noSelect.png')" mode="widthFix">
              </image>
            </view>
            <view class="detail" @click.stop="popType='ruleDetail'">
              <image class="myimg" :src="setCdn('/myimgs/rule/detail.png')" mode="widthFix"></image>
            </view>
          </view>

          <view class="conform" @click.stop="confirm" v-if="isStart">
            <image class="myimg" :src="setCdn('/myimgs/rule/conform.png')" mode="widthFix"></image>
          </view>
          <view class="conform" v-else @click="popType=''">
            <image class="myimg" :src="setCdn('/myimgs/treasure/back.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 实物奖品弹窗 -->
      <view class="mask  gift " v-if="popType=='entity'" @click="popType=''" @touchmove.stop.prevent="moveHandle">
        <view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'" @click.stop="inputt">
          <view class="popbg">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/bg.png')" mode="widthFix"></image>
          </view>
          <view class="giftName">
            {{lotteryInfo.giftName}}
          </view>
          <view class="giftImg">
            <image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image>
          </view>
          <view class="btn" @click.stop="receive">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/receive.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 积分奖品弹窗 -->
      <!-- +1 -->
      <view class="mask  gift integral" v-if="popType=='integral1'" @click="popType=''"
            @touchmove.stop.prevent="moveHandle">
        <view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'">
          <!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> -->
          <view class="popbg" @click.stop="inputt">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+1.png')" mode="widthFix"></image>
          </view>
          <view class="btn" @click="popType=''">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- +2 -->
      <view class="mask  gift integral" v-if="popType=='integral2'" @click="popType=''"
            @touchmove.stop.prevent="moveHandle">
        <view :class="padeType==1 ? 'pop animate__zoomIn':'pop animate__fadeOutUp'">
          <!-- <image class="myimg" :src="setCdn('/myimgs/prizePop/first.png')" mode="widthFix"></image> -->
          <view class="popbg" @click.stop="inputt">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/+2.png')" mode="widthFix"></image>
          </view>
          <view class="btn" @click="popType=''">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 未中奖 -->
      <view class="mask gift not " v-if="popType=='notGift'" @click="popType=''"
            @touchmove.stop.prevent="moveHandle">
        <view class="pop animate__zoomIn">
          <view class="popbg" @click.stop="inputt">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/not.png')" mode="widthFix"></image>
          </view>
          <view class="btn" @click="popType=''">
            <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/close.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
      <!-- 兑换成功 -->
      <view class="mask success" v-if="popType=='isSuccess'" @click="closePop">
        <view class="pop animate__fadeInUp" @click.stop="inputt">
          <view class="popbg">
            <image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image>
          </view>
          <view class="title">
            <image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/conversionTitle.png')"
                   mode="widthFix"></image>
          </view>
          <view class="giftImg">
            <image class="myimg" :src="lotteryInfo.giftCoverImg" mode="widthFix"></image>
          </view>
          <view class="giftName">
            {{lotteryInfo.giftName}}
          </view>
          <view class="btns">
            <view class="btn close" @click="closePop">
              <image class="myimg" :src="setCdn('/myimgs/2stage/bottle/back.png')" mode="widthFix">
              </image>
            </view>
            <view class="btn goMore" @click="goTreasure">
              <image class="myimg" :src="setCdn('/myimgs/2stage/shoppop/goMore.png')" mode="widthFix">
              </image>
            </view>
          </view>
        </view>
      </view>
      <!-- 规则条款 -->
      <view class="mask rule  privacy animate__zoomOutRight" v-if="popType=='ruleDetail'"
            @touchmove.stop.prevent="moveHandle">
        <view class="pop">
          <view class="popbg">
            <image class="myimg" :src="setCdn('/myimgs/rule/bg.png')" mode="widthFix"></image>
          </view>
          <view class="title">
            <image class="myimg" :src="setCdn('/myimgs/clause/rtitle.png')" mode="widthFix"></image>
          </view>
          <scroll-view class="content" scroll-y="true">
            <image class="myimg" :src="setCdn('/myimgs/clause/rcontent.png')" mode="widthFix"></image>
          </scroll-view>
          <view class="more">
            <image class="myimg" :src="setCdn('/myimgs/clause/more.png')" mode="widthFix"></image>
          </view>

          <view class="conform" @click="popType='isRule'">
            <image class="myimg" :src="setCdn('/myimgs/clause/close.png')" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </scroll-view>
    <mheader />
    <giftAdd ref="addPop" @finished='fn' />
  </view>
</template>

<script setup>
import {
  ref,
  reactive
} from 'vue'
import {
  setCdn,
  showModal,
  showToast,
  throttle
} from "@/common/js"
import {
  onLoad,
  onShow,
  onShareAppMessage
} from "@dcloudio/uni-app";
import {
  shareConfig
} from "@/config"
import {
  useStore
} from "@/stores"
// const store = useStore();
// import Age18 from "@/components/age18/age18.vue"
// import myTabbar from "@/components/myTabbar/myTabbar.vue"
import {
  api
} from "@/service"
import mheader from "@/components/header/header.vue"
import giftAdd from "@/components/giftAdd/giftAdd.vue"
const startDate = ref('2023/3/31 0:0:0')
const endDate = ref('2023/4/9')
let isAgree = ref(0) //同意规则
let lotteryCount = ref('') //已抽奖次数
let totalLotteryCount = ref('') //可以抽奖总次数
let shared = ref('') //是否已分享
let opened = ref("") //活动是否开启
let addPop = ref(null) //收货地址
let haveAdd = ref(0) //是否有收货地址

let isAgreeP = ref(0) //同意隐私
let isPrize = ref(0) //是否可以点击抽奖按钮
let popType = ref('') //弹窗样式
let padeType = ref(1) //1淡入 0淡出
let isDuring = ref(1) //是否可以参加活动 后台返回
let isStart = ref(0) //是否开始了活动 前端判断时间
let isGif = ref(0) //是否显示抽奖动画
let havePhone = ref(0) //是否授权了手机号

let animationData = ref({})
let animationDataTop = ref({})
let lotteryInfo = ref({}) //中奖信息

let giftLogId = ref('') //奖品记录id
let reGiftList = reactive([]) //奖品列表
let subInfo = reactive({}) //提交到后台
let startTouchTime=ref(0)//开始时间
let duringTouchTime=ref(0)//长摁时间
let liquidUpInfo=reactive({time:0,height:130})
//关闭弹窗
function closePop() {
  popType.value = ''
  lotteryInfo.value = {}
  subInfo.giftLogId = ''
}
//宝藏馆
function goTreasure() {
  uni.navigateTo({
    url: '/pages/treasure/treasure'
  })
  closePop()
  uni.removeStorageSync('addinfo')
}
//触摸开始
let timer
const touchstartBottle = () => {
  liquidUpInfo.height=120
  liquidUpInfo.time=0
  console.log('liquidUpInfo',liquidUpInfo);
  startTouchTime.value=new Date()
  clearInterval(timer)
  timer=setInterval(()=>{
    if(liquidUpInfo.height>0){
      console.log('开始');
      liquidUpInfo.time+=100
      liquidUpInfo.height-=5
      console.log('liquidUpInfo',liquidUpInfo);
      liquidUp()
    }

  },100)

}
//触摸结束
const touchend = () => {
  console.log('isPrize.value',isPrize.value);
  if(isPrize.value == 1){
    clearInterval(timer)
    console.log('触摸结束');
    liquidDown()
    apiLottery()

  }

}
// 液体蓄力上涨
const liquidUp = () => {
  console.log('液体蓄力上涨');
  var animation = uni.createAnimation({
    duration: liquidUpInfo.time,
    timingFunction: 'ease-in-out',
  })
  animation.height(liquidUpInfo.height+'rpx').step()
  animationDataTop.value = animation.export()
}
// 液体蓄力下降
const liquidDown = () => {
  console.log('液体蓄力下降');
  var animation = uni.createAnimation({
    duration: liquidUpInfo.time,
    timingFunction: 'ease-in-out',
  })
  animation.height('130rpx').step()
  animationDataTop.value = animation.export()
}
//瓶子旋转
const bottalAni = () => {
  console.log('瓶子旋转');
  lotteryInfo.value = {
    giftName: '',
    giftCoverImg: "",
    giftId: 0,
    sort: '',
    giftType: '',

  }
  animationData.value = null
  var animation = uni.createAnimation({
    duration: liquidUpInfo.time/2,
    timingFunction: 'ease',
  })
  let angle = 360 * 2
  //
  animation.rotate(angle).step()
  animationData.value = animation.export()

  setTimeout(() => {
    console.log('旋转动画');
    var animation = uni.createAnimation({
      duration: liquidUpInfo.time/2,
      timingFunction: 'ease',
    })
    let angle2 = 360 * 2 + lotteryInfo.value.sort * 45
    // let angle2=360 * 2 + 2*45
    console.log('angle2', angle2, lotteryInfo.value);
    animation.rotate(angle2).step()
    animationData.value = animation.export()
    setTimeout(() => {
      animation.rotate(0).step({
        duration: 100
      })
      animationData.value = animation.export()
      if (lotteryInfo.value.giftType == 'PHYSICAL') {
        popType.value = 'entity'
        return
      }

      if (lotteryInfo.value.giftType == 'SCORE') {
        if (lotteryInfo.value.giftName == '+1积分') {
          popType.value = 'integral1'
        } else {
          popType.value = 'integral2'
        }
        return
      }
      if (lotteryInfo.value.giftType == 'POSTER') {
        popType.value = 'notGift'
        return
      }
      // else {
      // 	popType.value = 'notGift'
      // 	return
      // }


      // animationData.value =null
    }, liquidUpInfo.time/2)
  }, liquidUpInfo.time/2)
}


//阻止穿透滑动
function moveHandle() {
  return
}
// 是否可以在活动期间
function ifDuringActivyty() {
  const currentDate = new Date
  console.log('currentDate', currentDate);
  let endtime = new Date(endDate.value).getTime()
  let isInEndTime = endtime - currentDate > 0 ? true : false
  console.log('isInEndTime', isInEndTime);

  let starttime = new Date(startDate.value).getTime()
  let isInStartTime = currentDate - starttime > 0 ? true : false
  console.log('isInStartTime', isInStartTime);
  if (
      // isInEndTime &&
      isInStartTime
  ) {
    isStart.value = 1
  } else {
    isStart.value = 0
  }
}
// 打开活动规则弹窗
function openRule() {
  if (uni.getStorageSync('haveAgreeRuleBottle')) {
    isAgree.value = 1
  }
  popType.value = 'isRule'
}
//授权手机号
function getphonenumber(e) {
  console.log(e);
  let code = e.detail.code
  let data = {
    code: e.detail.code
  }
  api.GetPhone(data).then(res => {
    if (res.code == 200) {
      console.log(res);
      havePhone.value = res.data
      getUserInfo()
      // goStart()
    } else {
      uni.showToast({
        title: res.message,
        icon: 'none'
      })
    }

  })
}
//同意拒绝规则
function changeAgree() {
  isAgree.value = !isAgree.value
}
// 点击了确认
function confirm() {
  console.log('isAgree.value', isAgree.value);
  if (isAgree.value == 1) {
    console.log('isAgree');
    popType.value = ''
    // 抽奖
    uni.setStorageSync('haveAgreeRuleBottle', true)
    // startLottery()
  } else {
    uni.showToast({
      title: '请先阅读并同意抽奖活动约定条款',
      icon: 'none'
    })
  }
}
//开始抽奖
function goStart() {
  if (havePhone.value) {
    let haveAgreeRuleBottle = uni.getStorageSync('haveAgreeRuleBottle')
    console.log('haveAgreeRuleBottle', haveAgreeRuleBottle);
    if (isStart.value) {
      if (!uni.getStorageSync('haveAgreeRuleBottle')) {
        popType.value = 'isRule'
      } else {
        startLottery()
      }
    } else {
      popType.value = 'isRule'
    }
  } else {
    return
  }
}
//发起抽奖，调接口
function startLottery() {
  console.log('可以抽奖', lotteryCount.value < totalLotteryCount.value);
  if (lotteryCount.value < totalLotteryCount.value) {
    if (isPrize.value == 0) {
      console.log(
          'startLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLotterystartLottery'
      );
      isPrize.value = 1
      touchstartBottle()
    }

  } else {

    uni.showToast({
      icon: 'none',
      title: '抽奖次数已到上限'
    })
  }
}
//调抽奖接口
const apiLottery=()=>{
  bottalAni()
  api.StartLotteryBottle().then(res => {
    console.log('----------ress调抽奖接口', res);
    if (res.code == 200) {
      getListGiftBottle()
      for (let i = 0; i < reGiftList.length; i++) {
        if (reGiftList[i].giftId == res.data.giftId) {
          lotteryInfo.value.giftId = res.data.giftId
          lotteryInfo.value.giftName = res.data.giftName
          lotteryInfo.value.giftCoverImg = res.data.giftCoverImg
          lotteryInfo.value.sort = parseInt(reGiftList[i].sort)
          lotteryInfo.value.giftType = res.data.giftType
          subInfo.giftLogId = res.data.giftLogId
        }
      }
      console.log('----------lotteryInfo', lotteryInfo);

    }
  })
}

//打开收货地址页
function goAddress() {
  uni.navigateTo({
    url: '/pages/address/address'
  })
}
//立即领取
const receive = () => {
  console.log('立即领取', haveAdd.value);
  if (haveAdd.value) {
    console.log('打开组件');
    addPop.value.openAdd()
    popType.value = ''
  } else {
    console.log('打开收货地址');
    goAddress()
    popType.value = ''
  }
}

function fn() {
  console.log('========================shoudaol');
  submit()
}
//提交兑换信息
const submit = () => {
  api.getuserinfo().then(res => {
    if (res.code == 200) {
      subInfo.receiverName = res.data.consigneeName
      subInfo.receiverPhone = res.data.consigneeMobile
      subInfo.receiverDetailAddress = res.data
              .consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +
          ' ' + res.data.consigneeDetailAddress
      console.log('subInfo', subInfo);
      api.SaveGiftAddress(subInfo).then(res => {
        console.log('@@@@@@@@@@@@@@@', res);
        if (res.code == 200) {
          popType.value = 'isSuccess'
        }
      })
    }
  })
}
// 获取抽奖信息
function getListGiftBottle() {
  api.GetLotteryinfoBottle().then(res => {
    console.log('-----------res', res);
    lotteryCount.value = res.data.lotteryCount
    totalLotteryCount.value = res.data.totalLotteryCount
    opened.value = res.data.opened
    shared.value = res.data.shared
    reGiftList = res.data.giftList
    console.log('reGiftList', reGiftList);

    if (opened.value) {
      isDuring.value = 1
    } else {
      isDuring.value = 0
    }
    setTimeout(() => {

      isPrize.value = 0
    }, 1000)
  })
}
//获取用户信息 判断是否授权过手机号
function getUserInfo() {
  api.getuserinfo().then(res => {
    if (res.code == 200) {
      havePhone.value = res.data.phone || 0
      console.log('res', res);
      if (res.data.consigneeProvince) {
        haveAdd.value = 1
        subInfo.receiverName = res.data.consigneeName
        subInfo.receiverPhone = res.data.consigneeMobile
        subInfo.receiverDetailAddress = res.data
                .consigneeProvince + ' ' + res.data.consigneeCity + ' ' + res.data.consigneeArea +
            ' ' + res.data.consigneeDetailAddress
      } else {
        haveAdd.value = 0
      }
    }
  })
}
// 阻止冒泡
function inputt() {
  console.log('阻止冒泡');
}
onLoad((option) => {
  ifDuringActivyty()
  getListGiftBottle()
  getUserInfo()
  // ListGiftBottle()
});
onShow(() => {
  if (uni.getStorageSync('addinfo')) {
    if (lotteryInfo) {
      console.log('打开组件');
      addPop.value.openAdd()
    } else {
      return
    }
  }
})
// 分享
onShareAppMessage((res) => {
  console.log("分享");
  uni.removeStorageSync('addinfo')
  if (!shared.value) {
    api.ShareBottle().then(res => {
      console.log('-----------分享res', res);
      uni.showToast({
        title: '分享成功，抽奖次数+1'
      })

      getListGiftBottle()

    })
  }

  return {
    ...shareConfig,

  }



})
</script>

<style lang="less" scoped>
.home {
  width: 750rpx;
  border-top: 1rpx solid transparent;
  position: relative;
  top: -1rpx;
  box-sizing: border-box;
  height: calc(100vh + 1rpx);
  height: 100vh;
  overflow: hidden;

  .myimg {
    width: 100%;
    height: 100%;
  }

  .title {
    width: 550rpx;
    margin: 170rpx auto 0;
  }

  .box {
    width: 646rpx;
    height: 685rpx;
    margin: 58rpx auto 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    .plant {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .bottleBox {
      // width: 183rpx;
      width: 60rpx;
      height: 135rpx;
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;

      .bottle {
        width: 60rpx;
        // overflow: hidden;
      }

      .top {
        width: 60rpx;
        overflow: hidden;
        z-index: 99;
        position: absolute;
        top: 0;
        height: 130rpx;
      }

      .phone {
        background-color: transparent;
        width: 60rpx;
        height: 135rpx;
        z-index: 999;
        position: absolute;
      }
    }
  }

  .boxGif {
    width: 750rpx;
    position: absolute;
    top: 0;
  }

  .buttons {
    .num {
      width: 750rpx;
      margin: 40rpx auto 0;
      text-align: center;
      font-size: 23rpx;
      color: #fdf7ed;
      font-weight: 700;
      font-family: SourceHanSansCN-Heavy;
    }

    .btns {
      display: flex;
      flex-direction: column;
      width: 750rpx;
      margin-top: 15rpx;
      justify-content: center;
      align-items: center;
      position: relative;

      .btn {
        width: 514rpx;
        height: 106rpx;

      }

      .share {
        width: 350rpx;
        height: 113rpx;
        margin-top: 32rpx;
        margin-left: 50rpx;
      }


    }

  }

  .ruleBtn {
    width: 90rpx;
    margin: 44rpx auto;
    padding-bottom: 150rpx;
  }

  .over {
    width: 600rpx;
    margin: 150rpx auto 0;
  }

  .mask {
    width: 750rpx;
    height: 101vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .pop {
      display: flex;
      // justify-content: center;
      align-items: center;
      flex-direction: column;

      .popbg {
        width: 100%;
        position: absolute;
        top: 0;
      }
    }

  }

  .rule {
    .pop {
      width: 680rpx;
      height: 1242rpx;

      .popbg {
        width: 100%;
        position: absolute;
        top: 0;
      }

      .tips {
        // width: 400rpx;
        margin: 983rpx auto 0;
        display: flex;
        align-items: center;
        justify-content: center;

        .icon {
          position: relative;
          margin-right: 20rpx;
          top: -5rpx;

          .notchoose {
            width: 25rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .choosed {
            width: 30rpx;
            position: absolute;
            top: -15rpx;
            left: 5rpx;
            display: flex;
            justify-content: center;
            align-items: center;

          }
        }

        .detail {
          width: 361rpx;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .word {
          font-family: SourceHanSansCN-Bold;
          font-size: 24rpx;
          color: #fdf7ed;
          line-height: 36rpx;
          font-weight: 700;

          text {
            padding-bottom: 10rpx;
            border-bottom: 2rpx solid #fdf7ed;
          }
        }

      }

      .conform {
        width: 200rpx;
        margin: 30rpx auto 0;
      }
    }
  }

  .prize {
    .pop {
      width: 700rpx;
    }
  }

  .not {
    .pop {
      // width: 679rpx;
      // height: 1242rpx;
      width: 700rpx;
      height: 900rpx;
      // position: relative;

      .popbg {
        width: 100%;
        position: absolute;
        top: 0;
      }

      .prizeImg {
        width: 330rpx;
        border: 10rpx solid #fff;
        margin: 280rpx auto 0;
      }
    }
  }

  .sub {
    .pop {
      width: 574rpx;

      .popbg {
        width: 100%;
        position: absolute;
        top: 0;
      }

      .buttons {
        margin: 336rpx auto 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .btn {
          width: 200rpx;
        }

        .close {
          margin-left: 46rpx;
        }
      }
    }
  }

  .privacy {
    .content {
      margin-top: 20rpx;
      width: 574rpx;
      height: 680rpx;
    }

    .title {
      width: 750rpx;
      margin-left: -35rpx;
    }

    .more {
      width: 32rpx;
      margin: 20rpx auto 0;
    }
  }

  .gift {
    .pop {
      width: 697rpx;
      height: 831rpx;

      .giftName {
        margin-top: 262rpx;
        font-family: SourceHanSansCN-Heavy;
        font-size: 35rpx;
        font-weight: 700;
        color: #fdf7ed;
        text-align: center;
      }

      .giftImg {
        width: 500rpx;
        margin-top: 60rpx;
      }

      .btn {
        margin-top: 80rpx;
        width: 276rpx;
      }
    }
  }

  .integral {
    .btn {
      position: absolute;
      bottom: -83rpx;
    }
  }

  .not {
    .btn {
      position: absolute;
      bottom: 10rpx;
    }
  }

  .success {
    .pop {
      width: 679rpx;
      height: 1242rpx;

      .title {
        width: 465rpx;
        padding-top: 200rpx;
        margin-top: 0;
      }

      .giftName {
        margin-top: 40rpx;
        font-family: SourceHanSansCN-Heavy;
        font-size: 35rpx;
        font-weight: 700;
        color: #fdf7ed;
        text-align: center;
      }

      .giftImg {
        width: 437rpx;
        margin-top: 115rpx;
      }

      .btns {
        margin-top: 70rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .btn {
          width: 200rpx;
        }

        .goMore {
          width: 256rpx;
          margin-top: 40rpx;
        }
      }
    }

  }

}
</style>
